<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link href="style.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/global.js"></script>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content-padded">
					<div class="mui-row m-row">
						<h5 class="mh m-address" id="mAddress">贵阳绕城高速</h5>
					</div>
					<div class="mui-row">
						<div>
							<div class="m-weather-info-box">
								<div class="m-tem" id="mTem">28℃</div>
								<div class="m-weather" id="mWeather">晴</div>
								<div class="m-wind" id="mWind">北风6-7级</div>
								<div class="m-hum" id="mHum">相对湿度58 %</div>
							</div>
							<div class="m-weather-info-box mui-text-center" style="">
								<img src="../../images/weather-fine.png" id="mWeaType" style="width: 60%;height: 60%;"/>
							</div>
						</div>
					</div>
					<div class="mui-row mh">
						<div style="text-align: left;color: whitesmoke;">
							近&nbsp;&nbsp;7个小时&nbsp;&nbsp;天气
						</div>
						<div class="m-row" id="dateFor7">
							<div class="m-weather-info-box m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
							<div class="m-weather-info-box  m-weather-list">
								8时
							</div>
						</div>
						<div class="m-row" id="weaTypeFor7">
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-largerain.png" style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box  m-weather-list">
								<img src="../../images/weather-fine.png" style="width: 100%;height: 100%;"/>
							</div>
						</div>
						<div class="m-row" id="temFor7">
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
							<div class="m-weather-info-box  m-weather-list">
								32°
							</div>
						</div>
						<div class="m-row" id="windFor7">
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
							<div class="m-weather-info-box  m-weather-list">
								北风
							</div>
						</div>
					</div>
					<div class="mui-row mh" style="margin-top: 5px;">
						<a style="font-size: 15px;" href="javaScript:;" id="detail_15">查看未来72小时天气预报&gt;&gt;</a>
					</div>
					<div class="mui-row mh" style="margin-top: 5px;">
						<div style="text-align: left;color: whitesmoke;">
							交通指数
						</div>
						<div>
							<div class="m-weather-info-box mui-text-center" style="width: 30%;">
								<img src="../../images/jt_s.gif"  style="width: 100%;height: 100%;"/>
							</div>
							<div class="m-weather-info-box mui-text-left" style="font-size: 12px;width: 70%;">
								<div id="jtLv">交通指数：良好</div>
								<div id="jtMsg">天气晴朗，路面干燥，交通气象条件良好，车辆可以正常行驶。</div>
							</div>
						</div>
						
					</div>
					<div class="mui-row" id="updateTime" style="margin-top: 5px;font-size: 15px;text-align: center;line-height: 15px;">
						最后更新：2018年09月24日14:30:53
					</div>
					
				</div>
			</div>
		</div> 
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					}
				}
			});
			var lng=0,lat=0,code='',forcastId='';
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				syncData(true);
			}
			
			function syncData(isInit){
				mui.ajax(FORCAST_DATA,{
					data:{
						lng:lng,
						lat:lat,
						level:1
					},
					type:"get",
					dataType:"json",
					success:function(data){
						var mdata=data.obj.data;
						reloadData(mdata,lng,lat,code,forcastId);
					}
				});
				mui.ajax(FORCAST_DATA,{
					data:{
						lng:lng,
						lat:lat,
						level:2
					},
					type:"get",
					dataType:"json",
					success:function(data){
						var mdata=data.obj.data;
						reload7Day(mdata);
						if(isInit){
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
						}
					}
				});
			}
			function reload7Day(data){
				if(data.length>=7){
					var dateDivs=document.getElementById("dateFor7");
					var weaTypeFor7Divs=document.getElementById("weaTypeFor7");
					var temFor7Divs=document.getElementById("temFor7");
					var windFor7Divs=document.getElementById("windFor7");
					for(var i=0;i<dateDivs.children.length;i++){
						dateDivs.children[i].innerText=new Date(data[i].time.replace(/-/g,"/")).getHours()+"时";
						var weatherInfo=getWeatherStr(data[i].rain,data[i].snow,data[i].cloud);
						weaTypeFor7Divs.children[i].children[0].setAttribute("src","../../"+weatherInfo.src);
						temFor7Divs.children[i].innerText=data[i].temp+"℃";
						var wind=getWinD(data[i].wd,data[i].ws);
						windFor7Divs.children[i].setAttribute("style","font-size:10px;");
						windFor7Divs.children[i].innerText=wind.wd.text+"风";
					}
				}
			}
			function reloadData(data,lng,lat,code,forcastId){
				
				if(data.length==1){
					var wind=getWinD(data[0].wd,data[0].ws);
					document.getElementById("mAddress").innerText=(code==null || code=='')?'贵阳绕城高速':code;
					document.getElementById("mTem").innerText=data[0].temp+"℃";
					document.getElementById("mHum").innerText="相对湿度"+data[0].rh+" %";
					document.getElementById("mWind").innerText=wind.wd.text+"风"+wind.ws.level+"级";
					document.getElementById("updateTime").innerText="最后更新："+data[0].time;
					var weatherInfo=getWeatherStr(data[0].rain,data[0].snow,data[0].cloud);
					console.log('降水：'+data[0].rain+'降雪：'+data[0].snow+'云量:'+data[0].cloud);
					document.getElementById("mWeather").innerText=weatherInfo.text;
					document.getElementById("mWeaType").setAttribute("src","../../"+weatherInfo.src);
					//本地数据
//					document.getElementById("jtLv").innerText="交通指数："+data.jt.lv;
//					document.getElementById("jtMsg").innerText=data.jt.msg;
				}
				
			}
			
			var detail=document.getElementById("detail_15");
			detail.addEventListener('tap',function(event){
				mui.openWindow({
					url:'weatherDataFor15Days.html',
					id:'weatherDataFor15Days.html',
					extras:{
						lng:lng,
						lat:lat,
						code:code,
						forcastId:forcastId
					},
					show:{
						anishow:'pop-in'
					},
					styles:{
						popGesture:'close'
					},
					waiting:{
						autoshow:true
					}
				});
			});
			//初始进入加载
			mui.plusReady(function(){
				var self=plus.webview.currentWebview();
				lng=self.lng;
				lat=self.lat;
				code=self.code;
				forcastId=self.forcastId;
				syncData(false);
			});
		</script>
	</body>

</html>